<template>
    <div class="app-container">
        <el-form inline
                 ref="queryForm"
                 :model="queryForm">
            <el-form-item label="车牌号">
                <el-input v-model="queryForm.carNo"
                          placeholder="输入车牌号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"
                           icon="el-icon-search"
                           size="mini"
                           @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh"
                           size="mini"
                           @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading"
                  :data="list"
                  @selection-change="handleSelectionChange">
           <el-table-column type="selection"
                             width="55"
                             align="center" />
           <!--  <el-table-column label="车辆id"
                             prop="carId"></el-table-column> -->
            <el-table-column label="车牌号"
                             prop="carNo"></el-table-column>
            <el-table-column label="车架号"
                             prop="vinNo"></el-table-column>
            <el-table-column label="车辆信息"
                             prop="carInfo"></el-table-column>
        </el-table>
        <pagination v-show="total>0"
                    :total="total"
                    :page.sync="queryForm.pageNum"
                    :limit.sync="queryForm.pageSize"
                    @pagination="getList" />
    </div>
</template>

<script>
import * as mmvApi from '@/api/mmv'

export default {
    data() {
        return {
            list: [],
            loading: false,
            total: 0,
            queryForm: {
                carNo: '',
                pageNum: 1,
                pageSize: 10,
            },
            selection: [],
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        emitData() {
            return this.selection;
        },
        getList() {
            this.loading = true;
            mmvApi.carBasicList(this.queryForm).then(response => {
                console.log(response);
                this.total = response.total;
                this.list = response.rows || [];
                this.loading = false;
            });
        },
        handleQuery() {
            this.queryForm.pageNum = 1;
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.selection = selection;
        },
    },
}
</script>
